<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>VUE  试验案例</title>
    <style>
    .block{background: #FFE69F;
        color: #f00;}
        .margin-bottom{margin-bottom: 10px;}
    </style>
</head>
<body>
<div class="container" id="container">
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-success">
                <div class="panel-heading">
                   芳是这个意思不
                </div>
                <div class="panel-body">
                    <div class="row margin-bottom">
                      <div class="col-xs-12">
                        <div class="block">  我是头呀</div>
                      </div>

                    </div>
                    <div class="row">
                        <div class="col-xs-3"><div class="block">我是左边呀</div></div>
                        <div class="col-xs-9"><div class="block">我是右边呀</div></div>
                    </div>

                </div>
            </div>
        </div>
    </div>

</div>

<script src="js/vue.js"></script>
<script>

    new Vue({
        el: '#container',


        data: {
            currentIndex:0,
            newTodoText: '',

            menu :{
                button:[
                    {
                        name:"左边父亲菜单",
                        type:"",
                        sub_button:[
                            {
                                name:"左边CLICK子菜单1",
                                type:"click",
                                key:"news_id_0048"
                            },
                            {
                                name:"左边CLICK子菜单2",
                                type:"click",
                                key:"news_id_0048"
                            },
                            {
                                name:"左边VIEW子菜单",
                                type:"view",
                                url:"http://www.bai.com"
                            }
                        ]
                    },
                    {
                        name:"中间VIEW菜单",
                        type:"view",
                        url:"http://www.bai.com"
                    },
                    {
                        name:"右边CLICK菜单",
                        type:"click",
                        key:"news_id_0048"
                    }
                ]
            }
        },
        methods: {
            addNewTodo: function () {
                this.todos.push(this.newTodoText);
                this.newTodoText = ''
            },
            doThis:function(idx){
                this.currentIndex=idx;
            },
            clearItem:function(){
                this.menu.button.splice(this.currentIndex,1)
                this.currentIndex=0;
            },
            addItem:function(){
                if(this.menu.button.length >=3){return;}
                var o={
                    name:"菜单名称",
                    type:"click",
                    key:"news_id_0048",
                    clicked:false
                };
                this.menu.button.push(o);
            },
            showItem:function(){
                console.log(this.menu.button[0].name);
            }

        }
    })
</script>
</body>
</html>